<template>
  <view class="content">
    <view style="height: 30rpx"></view>
    <view class="top">
      <y-input
        ref="child"
        text="求职岗位"
        :inputVal="from.title"
        @change="change"
        type="title"
      ></y-input>
      <u-line></u-line>
      <view v-for="(item, index) in selectList" :key="index">
        <view class="bet" style="padding: 40rpx 0" @click="openModal(item)">
          <view class="z-text">{{ item.name }}</view>
          <view class="bet" style="color: #8e8e93; font-size: 24rpx">
            {{ from[item.key] ? from[item.key].name : "请选择" }}
            <u-icon size="14" name="arrow-right" color="#8E8E93"></u-icon>
          </view>
        </view>
        <u-line></u-line>
      </view>
      <!-- <view>
        <view style="margin: 20rpx 0" class="z-text">福利待遇</view>
        <view class="gundong" style="margin: 20rpx 0 40rpx">
          <view
            v-for="item in columnList.fulilabelList"
            :key="item.id"
            :class="fulilabelIds.indexOf(item.id) == -1 ? 'price' : 'adive'"
            @click="tabMoney(item)"
            >{{ item.name }}</view
          >
        </view>
      </view> -->
      <view>
        <view style="margin: 20rpx 0" class="z-text">技能描述</view>
        <textarea
          class="textArea"
          v-model="from.content"
          placeholder="请不要在此填写手机号,微信号,QQ号等联系方式,联系电话写在对应项中,如需换行请用英文;分割"
        ></textarea>
      </view>
      <y-input
        text="联系人"
        :inputVal="from.name"
        @change="change"
        type="name"
      ></y-input>
      <u-line></u-line>
      <y-input
        text="联系电话"
        :inputVal="from.phone"
        @change="change"
        type="phone"
      ></y-input>
      <u-line></u-line>
      <view class="bet" style="padding: 30rpx 0" @click="shows = true">
        <view class="z-text">所在地址</view>
        <view class="bet" style="color: #8e8e93; font-size: 24rpx">
          {{
            address.length == 0
              ? "请选择"
              : `${address[0]}-${address[1]}-${address[2]}`
          }}
          <u-icon size="14" name="arrow-right" color="#8E8E93"></u-icon>
        </view>
      </view>
    </view>
    <u-picker
      :show="show"
      :columns="columns"
      @confirm="select"
      @cancel="show = false"
    ></u-picker>
    <u-picker
      :show="shows"
      ref="uPicker"
      :columns="columns1"
      @confirm="confirm"
      @cancel="shows = false"
      @change="changeHandler"
    ></u-picker>
	<view class="flexcenter">
		<button v-if="tab == 0" @click="fabu" class="button fabu">
		  {{ from.id ? "修改" : "发布" }}
		</button>
	</view>
    
  </view>
</template>

<script>
import yInput from "@/components/y-input/index";
export default {
  name: "tab-1",
  components: {
    yInput,
  },
  data() {
    return {
      tab: 0,
      from: {
        title: "",
        name: "",
        phone: "",
        content: "",
      },
      value1: "",
      value2: "",
      show: false,
      shows: false,
      columns: [],
      selectList: [
        { name: "工作年限", key: "workexperienceList" },
        { name: "学历", key: "educationList" },
        { name: "月薪", key: "xinzirangeList" },
      ],
      columnList: {},
      columns1: [],
      areaList: [],
      address: [],
      fulilabelIds: [],
      workList: [],
      selects: {},
	  provinces:"",
	  citys:"",
	  qus:"",
    };
  },
  async onLoad() {
    if (!uni.getStorageSync("token")) {
      // #ifdef APP-PLUS
      uni.navigateTo({
      	url: "/pages/login/applogin",
      });
      // #endif
      // #ifdef MP-WEIXIN
      uni.navigateTo({
      	url: "/pages/login/login",
      });
      // #endif
      return;
    }
    this.columnList = await this.getfromInfo();
    this.getAreaList();
    this.getWorkOne();
  },
  methods: {
    async getWorkOne() {
      const data = await this.http.get("work/one");
      this.from = {
        title: data.data.title,
        workexperienceList: data.data.workexperience,
        educationList: data.data.education,
        xinzirangeList: data.data.xinzirange,
        content: data.data.content,
        name: data.data.name,
        phone: data.data.phone,
        id: data.data.id,
      };
      this.address = data.data.address.split(",");
	  this.provinces = data.data.province
	  this.citys = data.data.city
	  this.qus = data.data.qu
	  console.log("发布求职页面获取工作信息");
	  console.log(data)
	  
    },
    async getAreaList() {
      const province = [];
      const city = [];
      const county = [];
      const a = await this.http.get("index/area"); // a.data
      this.areaList = a.data;
      a.data.map((item) => {
        province.push(item.name);
      });
      a.data[0].children.map((item) => {
        city.push(item.name);
      });
      a.data[0].children[0].children.map((item) => {
        county.push(item.name);
      });
      this.columns1 = [province, city, county];
      console.log(this.columns1, "columns1");
    },
    openModal(item) {
      this.selects = item;
      this.columns = [];
      const list = [];
      this.columnList[item.key].map((item) => {
        list.push(item.name);
      });
      this.columns.push(list);
      console.log(this.columns, "this.columns");
      this.show = true;
    },
    select(e) {
		
      this.from[this.selects.key] =
        this.columnList[this.selects.key][e.indexs[0]];
      this.show = false;
      console.log(this.from, "this.from");
    },
    change(e) {
      this.from[e.type] = e.val;
    },
    fabu() {
		if (!this.from.title || !this.from.name || !this.from.phone) {
			
			uni.showToast({
			  title: "请检查并将基本信息填写完整。",
			  icon: "none",
			});
			return;
		}
      const params = {
        title: this.from.title,
        workexperience_id: this.from.workexperienceList
          ? this.from.workexperienceList.id
          : "",
        education_id: this.from.educationList ? this.from.educationList.id : "",
        xinzirange_id: this.from.xinzirangeList
          ? this.from.xinzirangeList.id
          : "",
        fulilabel_ids: this.fulilabelIds.join(),
        content: this.from.content,
        name: this.from.name,
        phone: this.from.phone,
        address: this.address.join(),
		province:this.provinces,
		city:this.citys,
		qu:this.qus,
      };
      console.log(params, "params");
      this.http.post("work/add", params).then((res) => {
        if (res.code == 1) {
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
		  console.log("发布求职接口返回信息");
		  console.log(res);
          this.toast("保存成功");
        } else {
          this.toast(res.msg);
        }
      });
    },
    changeHandler(e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        indexs,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker,
      } = e;
      console.log(e, "eeeee=....");
      console.log(indexs, "indexs");
      const city = [];
      const county = [];
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        this.areaList[indexs[0]].children.map((item) => {
          city.push(item.name);
        });
        this.areaList[indexs[0]].children[indexs[1]].children.map((item) => {
          county.push(item.name);
        });
        // picker为选择器this实例，变化第二列对应的选项
        picker.setColumnValues(1, city);
        picker.setColumnValues(2, county);
      } else if (columnIndex === 1) {
        this.areaList[indexs[0]].children[indexs[1]].children.map((item) => {
          county.push(item.name);
        });
        picker.setColumnValues(2, county);
      }
    },
    // 回调参数为包含columnIndex、value、values
    confirm(e) {
		console.log(e,"98888");
		this.provinces = this.areaList[e.indexs[0]].id
		this.citys = this.areaList[e.indexs[0]].children[e.indexs[1]].id
		this.qus = this.areaList[e.indexs[0]].children[e.indexs[1]].children[e.indexs[2]].id
      this.address = e.value;
      this.shows = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.gundong {
  overflow-x: scroll;
  white-space: nowrap;
}
.price {
  display: inline-block;
  margin-right: 20rpx;
  padding: 10rpx 30rpx;
  font-size: 24rpx;
  border-radius: 10rpx;
  border: 1rpx solid #b7b7b7;
  color: #b7b7b7;
}
.adive {
  background-color: #c1282d;
  border: 1rpx solid #c1282d;
  color: white;
  display: inline-block;
  margin-right: 20rpx;
  padding: 10rpx 30rpx;
  font-size: 24rpx;
  border-radius: 10rpx;
}
.top {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
}
.fabu {
  width: 80%;
  margin-top: 100rpx;
}
.place-holder {
  font-size: 50rpx !important;
}
</style>